/* eslint-disable react-hooks/exhaustive-deps */
import { ProDescriptions } from '@ant-design/pro-components';
import React, { useMemo, useState } from 'react';
import { doFetch } from '@/utils/doFetch';
import styles from './index.less';
import { Col } from 'antd';

const { Item } = ProDescriptions;

function DetailPro(props) {
  let { fields } = props;
  const [curitem, setcuritem] = useState(props.detailData ?? {}); //全部数据

  const dataProps = useMemo(() => {
    if (props.detailData) {
      setcuritem(props.detailData);
      return { dataSource: props.detailData };
    } else {
      return {
        request: async () => {
          let res = await doFetch({ url: props.detailpath, params: props.params });
          setcuritem(res?.data?.data ?? {});
          return {
            success: res?.code == '0000',
            data: res?.data?.data ?? {},
          };
        },
      };
    }
  }, [props.detailData]);
  return (
    <ProDescriptions column={3} {...dataProps} title={props.title}>
      {fields
        ?.filter((it) => it.valueType != 'option')
        ?.map((it, i) => {
          const dataIndexs =
            !it?.render || it?.valueType == 'option'
              ? { dataIndex: it.dataIndex, valueType: it.valueType }
              : {};
          if (it.valueType == 'split') {
            return (
              <>
                <Col span={24}>
                  <div className={styles.title} style={{ borderWidth: i == 0 ? 0 : 1 }}>
                    {it.title}
                  </div>
                </Col>
              </>
            );
          }
          return (
            <Item
              span={it?.span ? it?.span : fields[i + 1]?.valueType == 'split' ? 3 : 1}
              key={it.dataIndex}
              label={it.title}
              {...dataIndexs}
            >
              {it?.render ? it?.render?.(curitem[it.dataIndex], curitem) : ''}
            </Item>
          );
        })}
    </ProDescriptions>
  );
}


export default DetailPro;
